// 获取数据渲染页面
function renderCategory() {
    axios.get('/my/category/list').then(res => {
        console.log(res)
        let { status, data } = res.data;
        if (status === 0) {
            let str = '';
            data.forEach(item => {
                str += `	<tr>
                <td>${item.name}</td>
                <td>${item.alias}</td>
                <td>
                  <button data-id="${item.id}" data-name="${item.name}" data-alias="${item.alias}" type="button" class="layui-btn layui-btn-xs">编辑</button>
                  <button data-id =${item.id} type="button" class="del layui-btn layui-btn-xs layui-btn-danger">删除</button>
                </td>
              </tr>`
            });
            // 结束后添加到tbody
            $('tbody').html(str);
            // console.log(tbody )
        }
    })
}
renderCategory()

let addIndex;
// 添加
$('button:contains("添加类别")').on('click', function () {
    addIndex = layer.open({
        type: 1,
        title: '添加类别',
        content: $('#tpl-add').html(),
        area: ['500px', '250px'],
    });
})
// 表单提交,完成提交
$('body').on('submit', '#add-form', function (e) {
    e.preventDefault();
    let data = $(this).serialize();
    axios.post('/my/category/add', data).then(res => {
        let { status, message } = res.data;
        if (status === 0) {
            layer.msg(message);
            renderCategory();
            layer.close(addIndex);
        }
    })
})
// 删除
$('tbody').on('click', '.del', function () {
    // this 指向删除按钮 不是tbody
    let id = $(this).data('id');
    // console.log(id);
    layer.confirm('你确定删除吗?', function (index) {
        // do.soething;
        // 确定 调用接口,发送请求
        axios.get(`/my/category/delete?id=${id}`).then(res => {
            let { status, message } = res.data
            if (status === 0) {
                layer.msg(message);
                renderCategory()
            }
        });
        layer.close(index)
    })
})

// 修改
let editIndex;
$('tbody').on('click', 'button:contains("编辑")', function () {
    // 获取三个自定义属性
    let wer = $(this).data();//data()括号里面什么都不写 全获取 
    console.log(wer, 111);
    editIndex = layer.open({
        type: 1,
        title: '编辑类别',
        // 设置弹框的内容
        content: $('#tpl-edit').html(),
        area: ['500px', '250px'],
        success: function () {
            // 必须保证弹框 里的表单  才能数据回填;
            // 使用layui的form模块,快速数据回填
            let form = layui.form;
            form.val('edit', wer)
        }

    })
})
// 提交表单
$('body').on('submit', '#edit-form', function (e) {
    e.preventDefault();
    let data = $(this).serialize();
    axios.post('/my/category/update', data).then(res => {
        let { status, message } = res.data;
        if (status === 0) {
            layer.msg(message);
            renderCategory(); // 更新页面数据
            layer.close(editIndex);
        }
    })

})